<template>
  <el-container v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" label-position="left" size="small">
      <el-form-item label="小程序名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="小程序描述" prop="name">
        <el-input v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item label="小程序logo" prop="forward" >
        <el-upload
          name="logo"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess"
           style="width: 100px;height: 100px;text-align: center;"
          >
          <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" style="width: 80px;height: 80px;margin-top: 10px;">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="form-item-tip">
          <span></span>
        </div>
      </el-form-item>
      <el-form-item label="首页转发图片" prop="forward">
        <el-upload
          name="forward"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.forward" :src="ruleForm.forward" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="form-item-tip">
          <span>提示：图片尺寸477*673</span>
        </div>
      </el-form-item>
<!--
    <el-form-item label="海报图片" prop="poster">
        <el-upload
          name="poster"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.poster" :src="ruleForm.poster" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="form-item-tip">
          <span>提示：图片尺寸650*690</span>
        </div>
      </el-form-item> -->

      <el-form-item label="首页授权图片" prop="authorize">
        <el-upload
          name="authorize"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.authorize" :src="ruleForm.authorize" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="form-item-tip">
          <span>提示：图片尺寸332*474</span>
        </div>
      </el-form-item>
      <el-form-item label="平台提成方式" prop="extract" >
          <el-radio v-model="ruleForm.extract_is_regular" :value="0" :label="0">提成比例</el-radio>
          <el-radio v-model="ruleForm.extract_is_regular" :value="1" :label="1">固定金额</el-radio>
      </el-form-item>
      <el-form-item label="平台提成设置" prop="extract" v-if="ruleForm.extract_is_regular == 0">
        <el-input placeholder="提成设置只能设置0.01~1之间" v-model="ruleForm.extract"></el-input>
        <div class="form-item-tip">
          <span>提示：值为0.1~1之间。如设置0.1 平台与司机的提成比率为1:9</span>
        </div>
      </el-form-item>
      <el-form-item label="平台提成设置" prop="extract" v-if="ruleForm.extract_is_regular == 1">
        <el-input placeholder="" v-model="ruleForm.extract"></el-input>
        <div class="form-item-tip">
          <span>提示：输入金额为平台的提成金额</span>
        </div>
      </el-form-item>

      <el-form-item label="底部版权">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="ruleForm.copyright"></el-switch>
      </el-form-item>

      <el-form-item label="底部版权文字" prop="copyright_rule">
        <el-input placeholder="请输入" v-model="ruleForm.copyright_rule"></el-input>
      </el-form-item>

      <el-form-item label="客服电话" prop="phone">
        <el-input placeholder="请输入" v-model="ruleForm.phone"></el-input>
      </el-form-item>

      <el-form-item label="零钱提现">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="ruleForm.open_pay">
        </el-switch>
      </el-form-item>

      <el-form-item label="零钱自动到账">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="ruleForm.auto_pay">
        </el-switch>
      </el-form-item>

      <el-form-item label="开启微信支付">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="ruleForm.open_weixin">
        </el-switch>
      </el-form-item>

      <el-form-item label="最大提现金额">
        <el-input placeholder="请输入" v-model="ruleForm.max_price">
          <template slot="append">元（整数）</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：最大提现金额，默认 /元（整数）</span>
        </div>
      </el-form-item>

      <el-form-item label="代驾接单范围">
        <el-input placeholder="请输入" v-model="ruleForm.scope"></el-input>
        <div class="form-item-tip">
          <span>提示：代驾接单范围设置，使用英文逗号分隔(如：1,2,3,4,5)，单位：公里</span>
        </div>
      </el-form-item>

      <el-form-item label="违约金">
        <el-input placeholder="请输入" v-model="ruleForm.violations">
          <template slot="append">元</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：默认为1元，如需关闭请填写0</span>
        </div>
      </el-form-item>

      <el-form-item label="取消订单时间">
        <el-input placeholder="请输入" v-model="ruleForm.time_limit">
          <template slot="append">分钟</template>
        </el-input>
        <div class="form-item-tip">
          <!--<span>提示：默认为1元，如需关闭请填写0</span>-->
        </div>
      </el-form-item>
      <el-form-item label="约车起步价">
        <el-input placeholder="请输入约车起步价" v-model="ruleForm.qbprice_one">
          <template slot="append">元</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：最低设置为5元,默认5元，保证平台纯利润</span>
        </div>
      </el-form-item>
     <el-form-item label="约司机起步价">
       <el-input placeholder="请输入约司机起步价" v-model="ruleForm.qbprice_two">
         <template slot="append">元</template>
       </el-input>
       <div class="form-item-tip">
         <span>提示：最低设置为20元，默认20元，保证平台纯利润</span>
       </div>
     </el-form-item>
      <el-form-item label="代驾取消订单设置">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="ruleForm.driver_apply_config">
        </el-switch>
        <div class="form-item-tip">
          <span>提示：开启后代驾端可以直接进行取消订单操作</span>
        </div>
      </el-form-item>

			<el-form-item label="区域限制设置">
				<el-switch
					:active-value="1"
					:inactive-value="0"
					v-model="ruleForm.area_config">
				</el-switch>
			</el-form-item>

			<el-form-item label="开启线下付款">
			  <el-switch
			    :active-value="1"
			    :inactive-value="0"
			    v-model="ruleForm.is_cash">
			  </el-switch>
			</el-form-item>

			<el-form-item label="开启实时计费">
			  <el-switch
			    :active-value="1"
			    :inactive-value="0"
			    v-model="ruleForm.is_online_price">
			  </el-switch>
			</el-form-item>

			<el-form-item label="保险金">
			  <el-input placeholder="请输入" v-model="ruleForm.benefits">
			    <template slot="append">元</template>
			  </el-input>
			  <div class="form-item-tip">
			    <span>提示：不填默认为0元</span>
			  </div>
			</el-form-item>
     <!-- <el-form-item label="订单提成金额">
        <el-input placeholder="请输入" v-model="ruleForm.commission_rate">
        </el-input>
        <div class="form-item-tip">
        </div>
      </el-form-item>
      <el-form-item label="注册司机提成金额">
        <el-input placeholder="请输入" v-model="ruleForm.driver_commission">
          <template slot="append">元</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：不填默认为0</span>
        </div>
      </el-form-item>
 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>

  </el-container>
</template>

<script>
  export default {
    mounted: function () {
      let _this = this;
      this.api.getBasicSetting().then(function (res) {
        if (res.code == 1) {
          _this.ruleForm = res.data;
        }
        _this.loading = false;
      }).catch(function (error) {
        throw new Error(error);
      })
    },
    data() {
      return {
        loading: true,  // 页面加载
        imageUrl: '',
        ruleForm: {
          forward:'',
          authorize:'',
          poster:''
        },
        rules: {
          name: [
            {required: true, message: '请设置小程序名称', trigger: 'blur'},
          ],
          forward: [
            {required: true, message: '请设置转发图片', trigger: 'blur'},
          ],
          authorize: [
            {required: true, message: '请设置首页授权图片', trigger: 'blur'},
          ],
          // poster: [
          //   {required: true, message: '请设置海报图片', trigger: 'blur'},
          // ],
          integral: [
            {required: true, message: '请设置积分抵现', trigger: 'blur'},
          ],
          integral_rule: [
            {required: true, message: '请设置积分抵现声明', trigger: 'blur'},
          ],
          copyright_rule: [
            {required: true, message: '请设置版权说明内容', trigger: 'blur'},
          ],
          secure_price: [
            {required: true, message: '请设置保单金额', trigger: 'blur'},
          ],
          phone: [
            {required: true, message: '请设置联系电话', trigger: 'blur'},
          ],
          extract: [
            {required: true, message: '请设置提成比例', trigger: 'blur'},
          ],
          user_integral: [
            {required: true, message: '请设置用户获得积分比例', trigger: 'blur'},
          ],
          vip_integral: [
            {required: true, message: '请设置会员获取积分比例', trigger: 'blur'},
          ],
          vip_price: [
            {required: true, message: '请设置会员价格', trigger: 'blur'},
          ],
          integral_max_price: [
            {required: true, message: '请设置订单金额大于多少可以使用积分', trigger: 'blur'},
          ],
          integral_reduce_price: [
            {required: true, message: '请设置积分最多抵扣多少元', trigger: 'blur'},
          ],
        },
        fileList: []
      };
    },
    methods: {
      fileUpload: function (fileInfo) {
        let file = fileInfo.file;
        let _this = this;
        this.BaseUtils.fileToBase64(file).then(function (value) {
          _this.api.uploadFileToBase64({
            icon: value
          }).then(function (res) {
            if (res.code == 1) {
              eval('_this.ruleForm.' + fileInfo.filename + '="' + res.data + '"');
              console.log('_this.ruleForm.' + fileInfo.filename + '="' + res.data + '"');
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          })
        }).catch(function (error) {
          throw new Error(error);
        })
      },
      handleAvatarSuccess(response, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.api.basicSettingUpdate(_this.ruleForm).then(function (res) {
              if (res.code == 1) {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'success'
                });
              } else {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            }).catch(function (error) {
              throw new Error(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>

  .el-container {
    display: block;
  }

  /* 表单 */
  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 180px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
